<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>绑码记录</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<jsp:include page="${pageContext.request.contextPath }/resource_path.jsp" flush="true"/>
<style type="text/css">
	.layui-table-click{
	    background-color:#ddf2e9 !important;
	}
</style>
</head>
<body>
	
<div class="x-nav">
	<span class="layui-breadcrumb">
		<a href="">首页</a>
		<a>
		  <cite>绑码记录</cite>
		</a>
	</span>
</div>	

<!-- 顶部搜索框 -->
<div class="x-body">
     <div style="margin-bottom: 18px">
		<div class="layui-inline">
			<table>
				<tr>
					<td>
						<div class="layui-form" style="width: 180px; margin-left: 10px">
							<input class="layui-input" name="keyword01" id="keyword01" placeholder="请输入物料SAP/QAD" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">
						</div>
					</td>
					<td> &nbsp</td>
					<td>
						<div class="layui-form" style="width: 180px; margin-left: 10px">
							<select id="keyword02" name="keyword02">
								<option value="">请选择供应商</option>
								<c:forEach items="${customer_type0}" var="customer">
									<option value="${customer.id}">${customer.customer_name}</option>
								</c:forEach>
							</select>
						</div>
					</td>
					<td class="layui-input-inline">
						<input class="layui-input" id="startTime" placeholder="请输入开始时间" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">
						-<input class="layui-input" id="endTime" placeholder="请输入结束时间" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px"> 
					</td>
				</tr>
			</table>
		</div>
		<button class="layui-btn layui-btn-normal" data-type="reload" style="margin-left: 25px;"><i class="layui-icon layui-icon-search"></i>检索</button>
	</div>
 	
   	<!-- 列表 -->
 	<table class="layui-hide" id="barCodeTable" lay-filter="barCodeTable"></table>
	
	<!-- 列表2 -->
 	<table class="layui-hide" id="subBarCodeTable" lay-filter="subBarCodeTable"></table>
</div>
	
<script type="text/javascript">
       var table;
	layui.use(['table','layer','upload','form','laydate'], function(){
		table = layui.table;
		var layer = layui.layer;
		var form = layui.form;
		 var laydate = layui.laydate;

	      //日期时间范围
	    	var minListDate = "1000-01-01 00:00:00";//最小可选时间，例：1990-02-01
	        var maxListDate = "3000-12-31 23:59:59";//最大可选时间，例：2200-12-31   
	        var enddate = laydate.render({
	            elem: "#endTime",
	            format: 'yyyy-MM-dd HH:mm:ss',
	            type: 'datetime',
	            min: minListDate,
	            max: maxListDate,
	            done: function (val, date) {
	                if (date && date.year){
	                	//设置结束时间 设置开始时间的最大值为结束时间
	                    begindate.config.max = {
	                        year: date.year,
	                        month: date.month - 1,//必须减1才是正确值
	                        date: date.date,
	                        hours: date.hours,
	                        minutes: date.minutes,
	                        seconds: date.seconds
	                    };
	                }else {
	                	//清除结束值    设置开始时间最大值
	                    var dateInit = new Date(maxListDate.replace(/-/g, "/"));
	                    begindate.config.max = {
	                        year: dateInit.getFullYear(),
	                        month: dateInit.getMonth(),
	                        date: dateInit.getDate(),
	                        hours: dateInit.getHours(),
	                        minutes: dateInit.getMinutes(),
	                        seconds: dateInit.getSeconds()
	                    };
	                }
	            }
	        });
	        var begindate = laydate.render({
	            elem: "#startTime",
	            format: 'yyyy-MM-dd HH:mm:ss',
	            type: 'datetime',
	            min: minListDate,
	            max: maxListDate,
	            done: function (val, date) {
	                if (date && date.year){
	                	//设置开始时间 设置结束时间的最小值为开始时间
	                    enddate.config.min = {
	                        year: date.year,
	                        month: date.month - 1,
	                        date: date.date,
	                        hours: date.hours,
	                        minutes: date.minutes,
	                        seconds: date.seconds
	                    };
	                }else {
	                	//清除开始值 ，设置结束值最小值
	                    var dateInit = new Date(minListDate.replace(/-/g, "/"));
	                    enddate.config.min = {
	                        year: dateInit.getFullYear(),
	                        month: dateInit.getMonth(),
	                        date: dateInit.getDate(),
	                        hours: dateInit.getHours(),
	                        minutes: dateInit.getMinutes(),
	                        seconds: dateInit.getSeconds()
	                    };
	                }
	            }
	        });
	        
		
		var $ = layui.jquery, active = {
			reload:function () {
				var keyword01 = $("#keyword01").val();
				var keyword02 = $("#keyword02").val();
	            var keyword03 = "";
				
				var startTime = $.trim($("#startTime").val());
				if(startTime != null && startTime != ""){
					keyword03 = keyword03 + " and check_date >= '"+startTime+""+"' ";
				}
				var endTime = $.trim($("#endTime").val());
				if(endTime != null && endTime != ""){
					keyword03 = keyword03 + " and check_date <= '"+endTime+"' ";
				}
	              
				table.reload('barCodeTableId',{
					method:'get',
					where:{	    keyword01:keyword01,
					    keyword02:keyword02,
					    keyword03:keyword03,
						}
					,page: {
	                    curr: 1//重新从第 1 页开始
	                }
				});
			}
		}
		$('.layui-btn').on('click', function(){
			var type = $(this).data('type');
			active[type] ? active[type].call(this) : '';
		});
		
		/* 列表 */
		table.render({
			elem: '#barCodeTable'
			,url:'${pageContext.request.contextPath }/codemark/listPageCodemark.do'
			,title: '退库单列表'
			,id :'barCodeTableId'
			,limits:[10,20,30]
			,toolbar: '#toolbarDemo'
			,cols: [[
				{field:'id',title:'序号',sort: true,width: 60,type:'numbers',align:'center'},
				{field:'receive_detail_quality_id', title:'收货单详情数量ID', hide:true},
				{field:'customer_name', title:'供应商名称', align:'center'},
				{field:'pici', title:'批次', align:'center'},
			  	{field:'materiel_name', title:'物料名称', align:'center'},
			 	{field:'materiel_num', title:'SAP/QAD', align:'center'},
   				/* {field:'brevity_num', title:'物料简码', align:'center'}, */
   				{field:'materiel_size', title:'物料规格', align:'center'},
   				{field:'materiel_properties', title:'物料型号', align:'center'},
   				{field:'knum', title:'入库数量', align:'center'},
			  	]]
			,page: true
			,done : function(){
                $('th').css({
                    'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                })
            }
		});
		
		table.on('row(barCodeTable)', function(obj){
			table.render({
				elem: "#subBarCodeTable"
                ,url:'${pageContext.request.contextPath }/codemark/queryCodemarkById2.do?detailId=' + obj.data.receive_detail_quality_id
                ,title: 'machineList'
                ,toolbar: '#toolbarDemo'
                ,cols:
					[[
                        {field:'id',title:'序号',sort: true,width: 60,type:'numbers',align:'center'},
                        {field: 'code',title: '条码',align:'center'},
                        {field: 'num',title: '单个数量(个)',align:'center', totalRow: true, templet: function(d){
							if(d.num == 0){
								return 0;
							} else {
								return d.num;
							}
						}},
						{field: 'is_ng',title: '物料类型',align:'center', templet: function(d){
							if(d.is_ng == 0){
								return	"良品";
							} else {
								return "不良品";
							}
						}} 
                    ]]
                ,page: false
                ,done : function(){
                    $('th').css({
                        'background-color': '#009688', 'color': '#fff','font-weight':'bold',
                    })
                }
			});
		})
	});
		
	toastrStyle()
</script>	

</body>
</html>